{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '示例页面:example/pages/index', '选择示例'])}
<style>
    .list-chose li {
        margin-bottom: 10px;
    }
    .list-chose li:last-child {
        margin-bottom: 0px;
    }
    .list-chose li span.title {
        font-weight: 700;
    }
    .list-chose li a {
        color: #4d5259;
        margin: 0px 5px;
        padding: 3px 5px;
        line-height: 30px;
        white-space: nowrap;
    }
    .list-chose li a:hover,
    .list-chose li a.active {
        background-color: var(--bs-primary);
        color: #fff;
    }
    .multi-chosen .mdi-close {
        display: none;
    }
    .multi-chosen a.active .mdi-close {
        display: inherit;
    }
    .list-chose li.positions {
        position: relative;
        height: 30px;
        overflow: hidden;
    }
    .list-chose li a.more {
        position: absolute;
        cursor: pointer;
        padding: 0px;
        top: 0px;
        right: 0px;
    }
    .list-chose li a.more:after {
        font-family: "Material Design Icons";
        content: "\f35d";
        font-size: 18px;
        -webkit-transition: -webkit-transform 0.25s linear;
        transition: -webkit-transform 0.25s linear;
        transition: transform 0.25s linear;
        transition: transform 0.25s linear, -webkit-transform 0.25s linear;
    }
    .list-chose li.positions.on {
        height: auto;
    }
    .list-chose li.positions.on a.more:after {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .list-chose li a.more:hover {
        color: #4d5259;
        background-color: transparent;
    }
    </style>
    <div class="row">

        <div class="col-lg-12">
          <div class="card">
            <div class="card-body">
            
              <p>该示例是做页面的实际跳转的，也就是 <code>localtion.href</code>，跳转后选项的选中效果也是用js实现的，你也可以用后台程序实现。</p>
            <ul class="list-unstyled list-chose">
              <li class="multi-chosen positions">
                <span class="title">工作地点：</span>
                <a href="javascript:;" data-search-name="cs" data-search-id="-1" class="active">全国</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="1">北京</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="2">上海</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="3">深圳</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="4">广州</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="5">杭州</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="6">成都</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="7">南京</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="8">武汉</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="9">西安</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="10">厦门</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="11">长沙</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="12">苏州</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="13">天津</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="14">重庆</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="15">郑州</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="16">青岛</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="17">合肥</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="18">福州</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="19">济南</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="20">大连</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="21">珠海</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="22">无锡</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="23">佛山</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="24">东莞</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="25">宁波</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="26">常州</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="27">沈阳</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="28">石家庄</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="29">昆明</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="30">南昌</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="31">南宁</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="32">哈尔滨</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="33">海口</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="34">中山</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="35">惠州</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="36">贵阳</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="37">长春</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="38">太原</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="39">嘉兴</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="40">泰安</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="41">昆山</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="42">烟台</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="43">兰州</a>
                <a href="javascript:;" data-search-name="cs" data-search-id="44">泉州</a>
                <a href="javascript:;" class="more"></a>
              </li>
              <li class="multi-chosen">
                <span class="title">工作性质：</span>
                <a href="javascript:;" data-search-name="gzxz" data-search-id="-1" class="active">不限</a>
                <a href="javascript:;" data-search-name="gzxz" data-search-id="1">应届 <i class="mdi mdi-close"></i></a>
                <a href="javascript:;" data-search-name="gzxz" data-search-id="2">实习 <i class="mdi mdi-close"></i></a>
              </li>
              <li class="multi-chosen">
                <span class="title">学历要求：</span>
                <a href="javascript:;" data-search-name="xl" data-search-id="-1" class="active">不限</a>
                <a href="javascript:;" data-search-name="xl" data-search-id="1">大专 <i class="mdi mdi-close"></i></a>
                <a href="javascript:;" data-search-name="xl" data-search-id="2">本科 <i class="mdi mdi-close"></i></a>
                <a href="javascript:;" data-search-name="xl" data-search-id="3">硕士 <i class="mdi mdi-close"></i></a>
                <a href="javascript:;" data-search-name="xl" data-search-id="4">博士 <i class="mdi mdi-close"></i></a>
                <a href="javascript:;" data-search-name="xl" data-search-id="5">不要求 <i class="mdi mdi-close"></i></a>
              </li>
              <li class="multi-chosen">
                <span class="title">公司规模：</span>
                <a href="javascript:;" data-search-name="gsgm" data-search-id="-1" class="active">不限</a>
                <a href="javascript:;" data-search-name="gsgm" data-search-id="1">少于15人 <i class="mdi mdi-close"></i></a>
                <a href="javascript:;" data-search-name="gsgm" data-search-id="2">15-50人 <i class="mdi mdi-close"></i></a>
                <a href="javascript:;" data-search-name="gsgm" data-search-id="3">50-150人 <i class="mdi mdi-close"></i></a>
                <a href="javascript:;" data-search-name="gsgm" data-search-id="4">150-500人 <i class="mdi mdi-close"></i></a>
                <a href="javascript:;" data-search-name="gsgm" data-search-id="5">500-2000人 <i class="mdi mdi-close"></i></a>
                <a href="javascript:;" data-search-name="gsgm" data-search-id="6">2000人以上 <i class="mdi mdi-close"></i></a>
              </li>
            </ul>
            
            </div>
          </div>
      </div>
  
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            $('a[data-search-name="cs"]').click(function (){
                $('a[data-search-name="cs"]').removeClass('active');
                $(this).addClass('active');
            });
            $('a[data-search-name="gzxz"]').click(function (){
                $('a[data-search-name="gzxz"]').removeClass('active');
                $(this).addClass('active');
            });
            $('a[data-search-name="xl"]').click(function (){
                $('a[data-search-name="xl"]').removeClass('active');
                $(this).addClass('active');
            });
            $('a[data-search-name="gsgm"]').click(function (){
                $('a[data-search-name="gsgm"]').removeClass('active');
                $(this).addClass('active');
            });
        });
        </script>